<!-- 参考官方文档 -->
<template>
    <view class="" ref="box_layout">
        name：{{person.name}}，age：{{person.age}}
        <scroll-view scroll-y>
            <view v-for="(item, index) in 50" :key="index">{{item}}</view>
        </scroll-view>
        <view v-for="(item, index) in 50" :key="index">{{item}}</view>
    </view>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    import { onLoad, onReady, onShow, onHide, onUnload, onPageScroll, onPullDownRefresh, onReachBottom, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';

    let box_layout = ref(null);
    let person = ref({
        name: '',
        age: 0
    });

    //监听页面加载，可以取到上一个页面通过navigator传输的参数
    onLoad((e) => {
        console.log("onLoad函数执行", e);
        person.value.name = e.name;
        person.value.age = e.age;
    });
    //监听页面初次渲染完成，可以取到组件ref的参数
    onReady(() => {
        console.log("onReady函数执行");
        console.log(box_layout);
    });
    //监听页面显示
    onShow(() => {
        console.log("onShow函数执行");
    });
    //监听页面隐藏
    onHide(() => {
        console.log("onHide函数执行");
    });
    //监听页面卸载
    onUnload(() => {
        console.log("onUnload函数执行");
    });
    //监听页面滚动
    onPageScroll((e) => {
        console.log("onPageScroll函数执行", e);
    });
    //监听下拉
    onPullDownRefresh(() => {
        console.log("onPullDownRefresh函数执行");
    });
    //页面滚动到底部触发事件，非scroll-view
    onReachBottom(() => {
        console.log("onReachBottom函数执行");
    });
    //用户点击右上角分享
    onShareAppMessage(() => {
        return {
            //标题
            title: "测试",
            //页面路径
            path: "/pages/other/page-lifecycle-detail/page-lifecycle-detail?name=张三&age=18"
        };
    });
    //监听用户点击右上角转发到朋友圈
    onShareTimeline(() => {
        return {
            //标题
            title: "测试",
            //参数
            query: "name=张三&age=18"
        };
    });
</script>

<style lang="scss" scoped>

</style>